<template>
	<view>
		<view class="detail" v-if="data">
			<view class="title">
				{{data.title}}
			</view>
			<view class="info">
				<view class="author">
					编辑：{{data.author}}
				</view>
				<view class="time">
					{{changeTime}}
				</view>
			</view>
			<view class="content">
				<rich-text class="richText" :nodes="formatRichText"></rich-text>
			</view>
			</view>
			<view class="mydescription">
				声明：本站的内容均采集与腾讯新闻，如果侵权请联系管理（513894357@qq.com）进行整改删除，本站进行了内容采集不代表本站及作者观点，若有侵犯请及时联系管理员，谢谢您的支持。
			</view>
		</view>
	</view>
</template>

<script>
import { request } from "../.././utils/request.js"
import { formatTimestamp } from "../.././utils/usetime.js"
import { newcontent } from "../.././utils/newcontent.js"

	export default {
		data() {
			return {
				data:[],
				newContent:'',
				newTime: '',
				histories:[]
			}
		},
		onLoad(e) {
			// console.log(e)
			this.requestXWXQ(e.cid,e.id,e.looktime)
		},
		methods:{
			requestXWXQ(cid,id,looktime){
				request({
				  url: `https://ku.qingnian8.com/dataApi/news/detail.php`,
				  data: {
					  cid:cid,
					  id:id
				  },
				  method: 'GET'
				})
				  .then((res) => {
				    // console.log(res)
					// 定义变量存储历史记录的cid和id
					let histories = []
					this.data = res
					let title = this.data.title
					let author = this.data.author
					let posttime = this.data.posttime
					let picurl = this.data.picurl
					let cid = this.data.cid
					let id = this.data.id
					uni.getStorage({
						key: 'XWLB',
						success: function (res) {
							// this.histories = res.data.histories
						},
						complete: (res) => {
							// let histories = this.histories
							// 在小程序中，如果 res.data 为 undefined，则无法访问 histories 属性，
                            // 因此在访问 histories 属性之前进行判断，确保 res.data 存在并且具有 histories 属性。
							let histories = res.data && res.data.histories || []
							// console.log(res.data.histories)
							if (histories) {
							    // 检查是否存在重复信息
							    // const parsedData = JSON.parse(histories)
							    let isDuplicate = histories.some(item => 
									item.id === id
								)
								if (isDuplicate) {
								      console.log('重复数据，不保存');
								      return;
								    }
							}
							histories.push({title,author,posttime,picurl,cid,id,looktime})
							// console.log(histories)
							uni.setStorage({
								key: `XWLB`,
								data: {
								    histories
								}
							})
						}
					})
				  })
				  .catch((err) => {
				    console.error(err)
				  })
			}
		},
		computed:{
			changeTime(){
				this.newTime = formatTimestamp(this.data.posttime)
				return this.newTime
			},
			formatRichText() { //控制小程序中图片大小
			  if(this.data.content)
			  {
				this.newContent =  newcontent(this.data.content)  
				// console.log(newcontent(this.data.content) )
				return this.newContent
			  }
			}	
		}
	}
</script>

<style lang="scss">
	.detail{
		padding: 30rpx;
		.title{
			font-size: 46rpx;
			color: #333;
		}
		.info{
			background-color: #F6F6F6;
			padding: 10rpx;
			font-size: 22rpx;
			color: #666;
			display: flex;
			justify-content: space-between;
			margin: 40rpx 0;
		}
		.content{
			padding-bottom:50rpx;
			/* /deep/ 或者 ::v-deep 选择器穿透组件样式 */
			// .richText img {
			//   max-width: 100%; /* 图片宽度最大为容器宽度 */
			//   // height: auto; /* 高度自适应 */
			//   display: block; /* 将图片显示为块级元素 */
			//   margin: 20rpx auto 20rpx auto;
			// }
		}
	}
	.mydescription{
		background: #31C27C;
		font-size: 30rpx;
		padding:20rpx;
		color:white;
		line-height: 1.8em;
	}
</style>
